<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础组件</title>
    <link rel="stylesheet" href="base.css">
    <script src="../js/vue.js"></script>
</head>
<body>
    
   

    <strong>组件数据绑定</strong>
    <div id="base_01">
        <base_01 title = "一个标题"></base_01>
        <base_01 title = "二个标题"></base_01>
        <base_01 title = "三个标题"></base_01>
    </div>
    <script>
        //全局组件
        Vue.component("base_01", {
            data: function() {
                return {
                    message: "ok"
                }
            },
            props: ['title'],
            template: "<div>基础全局组件=>: {{title}}</div>"
        })
        let base_01 = new Vue({
            el: "#base_01"
        })
    </script>
     <!-- *********************************************** -->   
    <hr><strong>发送数据给子组件</strong>
    <div id="base_02">
        <base_02 v-for="post in posts" :key="post.id" :person_id = 'post.id' :person_name = 'post.name' :person_skill = 'post.skill'></base_02>
    </div>
    <script>
        Vue.component("base_02", {
            data: ()=>{
                return{
                }
            },
            props:["person_id","person_name","person_skill"],
            template: '<div>工号：{{person_id}}&nbsp;&nbsp;&nbsp;叫啥：{{person_name}}&nbsp;&nbsp;&nbsp;会啥：{{person_skill}}</div>'
        })

        let base_02 = new Vue({
            el: "#base_02",
            data: {
                posts: [
                        {id: 001, name: '张三', skill: '打酱油'},
                        {id: 002, name: '李四', skill: '吹牛皮'},
                        {id: 003, name: '王五', skill: '画蟑螂'}
                    ]
            }
        })
    </script>
    <!-- *********************************************** -->
    <hr><strong>发送对象数据给子组件</strong>
    <div id="base_03">
        <base_03 v-for="post in posts" :key="post.id" :post = 'post'></base_03>
    </div>
    <script>
        Vue.component("base_03", {
            data: ()=>{
                return{
                }
            },
            props:["post"],
            template: '<div>对象数据组件=>: 工号：{{post.id}}&nbsp;&nbsp;&nbsp;叫啥：{{post.name}}&nbsp;&nbsp;&nbsp;会啥：{{post.skill}}</div>'
        })

        let base_03 = new Vue({
            el: "#base_03",
            data: {
                posts: [
                        {id: 001, name: '张三', skill: '打酱油'},
                        {id: 002, name: '李四', skill: '吹牛皮'},
                        {id: 003, name: '王五', skill: '画蟑螂'}
                    ]
            }
        })
    </script>

    <!-- *********************************************** -->
    <hr><strong>事件传参给父组件</strong>
    <div id="base_04" :style="{fontSize: font_size+'em'}" >
        <base_04  v-on:enlarge-text= 'changeFont'></base_04>
    </div>
    <script>
        Vue.component("base_04", {
            data: ()=>{
                return{

                }
            },
            template: `<div><span>注意放大了</span><button @click="$emit('enlarge-text','字体已经放大了')">点击放大字体</button></div>`
        })
        let base_04 = new Vue({
            data: {
                font_size: 1
            },
            el: "#base_04",
            methods: {
                changeFont(message){
                    this.font_size +=0.1;
                    console.log(message);
                }
            }
        })
    </script>

    <!-- *********************************************** -->
    <hr><strong>自动定义模态输入组件</strong>
    <div id="base_05">
        <base_05 v-model='searchText'></base_05>
        <span>消息来了：{{searchText}}</span>
    </div>
    <script>
        Vue.component("base_05", {
            props:["value"],
            template: `
                <input
                    v-bind:value='value'
                    v-on:input="$emit('input', $event.target.value)"
                />
            `
        })
        let base_05 = new Vue({
            el: "#base_05",
            data: {
                searchText: "哈哈"
            }
        })
    </script>

    <!-- *********************************************** -->
    <hr><strong>组件的插槽</strong>
    <div id="base_06">
        <base_06><h3>标题：</h3>插槽内容放这里</base_06>
    </div>
    <script>
        Vue.component("base_06", {
            data:()=>{
                return {

                }
            },
            template: `
                <div><slot><p>组件里没有插入内容就显示该内容，有则忽略</p></slot> 本块为组件内容 </div>
            `
        })
        let base_06 = new Vue({
            el: "#base_06"

        })
    </script>

    <!-- *********************************************** -->
    <hr><strong>动态组件带值传参</strong>
    <div id="base_07">
        <button @click='changeId'>切换组件</button>
        <component v-bind:is="base_id" title="动态组件1" :post='postData'></component>
    </div>
    <script>
        let base_07= new Vue({
            el:"#base_07",
            data: {
                base_model: ['base_01','base_03'],
                base_id: 'base_01',
                flog: false,
                postData: {id: 001, name: '张三', skill: '打酱油'}
            },
            methods: {
                changeId() {
                    this.base_id = this.flog ? 'base_01': 'base_03';
                    this.flog = !this.flog;
                }
            }
        }) 
    </script>
    <!--  <script>//补充
    (function () {
        // 这个值必须匹配下列字符串中的一个
        alert( ['success', 'warning', 'danger'].indexOf('success')!==-1)
      })()
    </script> -->

    <!-- *********************************************** -->
    <hr/><strong>定位（具名）插槽</strong>
    <div id="base_08">
        <base_08>
            <h3 slot="header">我是定位插槽的标题</h3>
            <h3 slot="footer">我是定位插槽的脚步</h3>
            <h4>我是没人认领的插槽</h4>
        </base_08>
        
    </div>
    <script>        
        Vue.component("base_08", {
            data:()=>{
                return {

                }
            },
            template: `
            <div>
                <slot></slot>
                <p>我是定位插槽的内容</p>                   
                <slot name="footer"></slot>
                <slot name="header"></slot>  
            </div>
            `
        })
        let base_08 = new Vue({
            el: "#base_08"
        })
    </script>
    
    <!-- *********************************************** -->
    <hr/><strong>动态组件Dynamic components</strong>
    <div id="dyna-com">
        <div class="nav">
            <span v-for="(nav, index) in navArray" @click='changeBtn(nav.id)' 
            :class="{activedNav: nav.id === componentid }" :key="index">{{nav.value}}</span>
        </div>
        <keep-alive><!-- 失活组件会缓存起来 -->
            <component :is="componentid"></component>
            <component :is="componentid"></component>
        </keep-alive>
    </div>
    <script>
        Vue.component('nav-a',{

            data: ()=>{
                return {
                    selected_nav_sub: 'aa',
                    subNavArray: [
                        {id: 'aa',title: '生活一', content: '生活：你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。'},
                        {id: 'bb',title: '生活二', content: '生活：这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例'},
                        {id: 'cc',title: '生活三', content: '生活：重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。'},
                        {id: 'dd',title: '生活四', content: '生活：为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。'}
                    ]
                }
            },
            computed: {
                activateNav() {
                    return this.selected_nav_sub;
                }
            },
            methods: {
                changeNav(id) {
                    this.selected_nav_sub = id;
                }
            },
            template: `
                <div class='nav-container'>
                    <ul class='navs'>
                        <li v-for="(nav, index) in subNavArray" :class="{activedNavSub: nav.id === activateNav }" 
                        @click='changeNav(nav.id)' :key="index">{{nav.title}}</li>
                    </ul>
                    <div v-for="(nav, index) in subNavArray" class="nav-content" v-show=" nav.id === activateNav ">
                        {{nav.content}}
                    </div>
                </div>
                `
        });
        Vue.component('nav-b',{
            data: ()=>{
                return {
                    selected_nav_sub: 'aa',
                    subNavArray: [
                        {id: 'aa',title: '梦想一', content: '梦想：你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。'},
                        {id: 'bb',title: '梦想二', content: '梦想：这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例'},
                        {id: 'cc',title: '梦想三', content: '梦想：重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。'},
                        {id: 'dd',title: '梦想四', content: '梦想：为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。'}
                    ]
                }
            },
            computed: {
                activateNav() {
                    return this.selected_nav_sub;
                }
            },
            methods: {
                changeNav(id) {
                    this.selected_nav_sub = id;
                }
            },
            template: `
                <div class='nav-container'>
                    <ul class='navs'>
                        <li v-for="(nav, index) in subNavArray" :class="{activedNavSub: nav.id === activateNav }" 
                        @click='changeNav(nav.id)' :key="index">{{nav.title}}</li>
                    </ul>
                    <div v-for="(nav, index) in subNavArray" class="nav-content" v-show=" nav.id === activateNav ">
                        {{nav.content}}
                    </div>
                </div>
                `
        });
        Vue.component('nav-c',{
            data: ()=>{
                return {
                    selected_nav_sub: 'aa',
                    subNavArray: [
                        {id: 'aa',title: '诗和远方一', content: '诗和远方：你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。'},
                        {id: 'bb',title: '诗和远方二', content: '诗和远方：这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例'},
                        {id: 'cc',title: '诗和远方三', content: '诗和远方：重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。'},
                        {id: 'dd',title: '诗和远方四', content: '诗和远方：为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。'}
                    ]
                }
            },
            computed: {
                activateNav() {
                    return this.selected_nav_sub;
                }
            },
            methods: {
                changeNav(id) {
                    this.selected_nav_sub = id;
                }
            },
            template: `
                <div class='nav-container'>
                    <ul class='navs'>
                        <li v-for="(nav, index) in subNavArray" :class="{activedNavSub: nav.id === activateNav }" 
                        @click='changeNav(nav.id)' :key="index">{{nav.title}}</li>
                    </ul>
                    <div v-for="(nav, index) in subNavArray" class="nav-content" v-show=" nav.id === activateNav ">
                        {{nav.content}}
                    </div>
                </div>
                `
        }); 
        Vue.component('nav-d',{
            data: ()=>{
                return {
                    selected_nav_sub: 'aa',
                    subNavArray: [
                        {id: 'aa',title: '一', content: '诗和远方：你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。'},
                        {id: 'bb',title: '二', content: '诗和远方：这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例'},
                        {id: 'cc',title: '三', content: '诗和远方：重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。'},
                        {id: 'dd',title: '四', content: '诗和远方：为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。'}
                    ]
                }
            },
            computed: {
                activateNav() {
                    return this.selected_nav_sub;
                }
            },
            methods: {
                changeNav(id) {
                    this.selected_nav_sub = id;
                }
            },
            template: `
                <div class='nav-container'>
                    <ul class='navs'>
                        <li v-for="(nav, index) in subNavArray" :class="{activedNavSub: nav.id === activateNav }" 
                        @click='changeNav(nav.id)' :key="index">{{nav.title}}</li>
                    </ul>
                    <div v-for="(nav, index) in subNavArray" class="nav-content" v-show=" nav.id === activateNav ">
                        {{nav.content}}
                    </div>
                </div>
                `
        });    
           
        let dynaCom = new Vue({
            el: "#dyna-com",
            data: {
                selected_nav:  'nav-a',
                navArray: [
                    {id: 'nav-a',value: '生活'},
                    {id: 'nav-b',value: '梦想'},
                    {id: 'nav-c',value: '诗和远方'},
                    {id: 'nav-d',value: '李周'} 
                ]
            },
            computed: {
                componentid() {
                    return this.selected_nav;
                }
            },
            methods: {
                changeBtn(id) {
                    this.selected_nav = id;
                }
            }
           /*  components: {
                'nav-a': `<div>这是菜单一内容</div>`,
                'nav-b': `<div>这是菜单二内容</div>`
            } */
        })
    </script>
</body>
</html>